<template>
	<view>
		<!-- 加了fixed -->
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<text class="balance">放单状态</text>
				<!-- 右边自定义图片 -->
				<view @click="gotaskone" class="more">
					<text class="jia">+</text>
				</view>
			</view>
		</view>
		<!-- 没加fixed -->
		<view class="status-bar"></view>
		<view class="" style="height: 100rpx ;">
		</view>
		<view class="header">
			<image class="headPortrait" :src="headPortrait"></image>
			<text class="name">{{name}}</text>
			<text class="id">ID: {{id}}</text>
			<image class="shiminga" src="../../../static/user2/shiminga.png" mode=""></image>
			<image class="vipa" src="../../../static/user2/vipa.png"></image>
			<text @click="goCrown" class="vip">{{vip}}</text>
			<text class="toppingNum">置顶次数: {{toppingNum}}次</text>
			<text @click="goBuyontop" class="purchase">购买</text>
			<text @click="goBond" class="bond">{{bond}}</text>
			<image class="Back_icon" src="../../../static/user2/rightjt.png"></image>
		</view>
		<view class="issueVoucher">
			<text class="issue">发布凭证:<text class="voucher">{{voucher}}</text> </text>
			<view class="recharge">充值</view>
			<view class="withdrawal">提现</view>
		</view>
		<view class="releaseBox">
			<view :class="{tabBoxstyle:index==num}" @click="qiedhuan(index,item)" v-for="(item,index) in releaseData" :key="index">
				<view class="tabBox">
					<text class="tabcontent">
						{{item.tabcontent}}
					</text>
				</view>
			</view>
		</view>
		<view @click="gotaskdetail" class="taskStatusBox" v-for="(item,index) in examineData" :key="index">
			<view v-if="num==0" class="moreImgbox">
				<image class="moreIcon" src="../../../static/user2/moreIcon.png"></image>
			</view>
			<view class="taskStatusBox_top">
				<text class="taskName">{{item.taskName}}</text>
				<view v-if="num==0 || num==2 || num==3" class="pzBox">
					 <image class="pingzheng" src="../../../static/dating/pingzheng.png"></image>
			         <text class="vouchera">{{item.vouchera}}凭证</text>
				</view>
			   <text v-if="num==1" class="priceleft">￥{{item.price}} <text class="number"> / {{item.number}}个</text> </text>
			    <view class="labela">{{item.labela}}</view>
			    <view class="labelb">{{item.labelb}}</view>
			</view>
			<view v-if="num==0 || num==2 || num==3" class="taskStatusBox_center">
				 <text class="price">￥{{item.price}} <text class="number"> / {{item.number}}个</text> </text>
			    <view @click.stop="godosage" v-if="num==3" class="addff">
				  {{item.addff}}
			    </view>
				<text v-if="num==0" class="republish">{{item.republish}}</text>
				<text v-if="num==2" class="tobeRevieweda">{{item.tobeRevieweda}}</text>
			</view>
			<view class="numBox">
				<view>
					<image class="shulaing" src="../../../static/dating/shulaing.png"></image>
				    <text class="num">数量{{item.num}}</text>
				</view>
				<view>
					<image class="text" src="../../../static/dating/text.png"></image>
				<text class="surplus">剩余{{item.surplus}}</text>
				</view>
				<view>
					<image class="numberimg" src="../../../static/dating/number.png"></image>
				<text class="numbera">编号{{item.numbera}}</text>
				</view>
				<view>
					<image class="bianhao" src="../../../static/task/bianhao3.png"></image>
				<text class="time">剩余时长 <text class="timeNum">{{item.time}}h</text></text>
				</view>
			</view>
			<view v-if="num==1" class="unexpired">
				<view @click.stop="gotaskmanage" class="tobeReviewed">{{item.tobeReviewed}}</view>
				<view class="modify">{{item.modify}}</view>
				<view class="end">{{item.end}}</view>
				<view class="top">{{item.top}}</view>
				<view class="dosage">{{item.dosage}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 3,
				headPortrait: '../../../static/user/photo.png',
				name: '鱼书',
				id: '123456',
				shimin: '已实名',
				vip: '开通皇冠会员',
				toppingNum: '10',
				bond: '保证金',
				voucher: '388.2544',
				releaseData: [{
					tabcontent: '未发布',
					id: 1
				}, {
					tabcontent: '未到期',
					id: 2
				}, {
					tabcontent: '待审核',
					id: 3
				}, {
					tabcontent: '已审核',
					id: 4
				}],
				examineData: [{
						taskName: '任务名称',
						vouchera: '0',
						labela: '下载注册',
						labelb: '王者荣耀',
						price: '6.80',
						number: '20',
						addff: '加量发放',
						num: '0',
						surplus: '0',
						numbera: '2112211231',
						time: '0',
						tobeReviewed:'待审核',
						modify:'修改',
						end:'结束',
						top:'置顶',
						dosage:'加量加价',
						republish:'重新发布',
						tobeRevieweda:'待审核'
					},
					{
						taskName: '任务名称',
						vouchera: '0',
						labela: '下载注册',
						labelb: '王者荣耀',
						price: '6.80',
						number: '20',
						addff: '加量发放',
						num: '0',
						surplus: '0',
						numbera: '2112211231',
						time: '0',
						tobeReviewed:'待审核',
						modify:'修改',
						end:'结束',
						top:'置顶',
						dosage:'加量加价',
						republish:'重新发布',
						tobeRevieweda:'待审核'
					},
					{
						taskName: '任务名称',
						vouchera: '0',
						labela: '下载注册',
						labelb: '王者荣耀',
						price: '6.80',
						number: '20',
						addff: '加量发放',
						num: '0',
						surplus: '0',
						numbera: '2112211231',
						time: '0',
						tobeReviewed:'待审核',
						modify:'修改',
						end:'结束',
						top:'置顶',
						dosage:'加量加价',
						republish:'重新发布',
						tobeRevieweda:'待审核'
					},
					{
						taskName: '任务名称',
						vouchera: '0',
						labela: '下载注册',
						labelb: '王者荣耀',
						price: '6.80',
						number: '20',
						addff: '加量发放',
						num: '0',
						surplus: '0',
						numbera: '2112211231',
						time: '0',
						tobeReviewed:'待审核',
						modify:'修改',
						end:'结束',
						top:'置顶',
						dosage:'加量加价',
						republish:'重新发布',
						tobeRevieweda:'待审核'
					}
				]
			};
		},
		methods: {
			back() {
				uni.navigateBack({

				})
			},
			gotaskone() {
				uni.navigateTo({
					url: './taskPublishing'
				})
			},
			goCrown() {
				uni.navigateTo({
					url: './crownMember'
				})
			},
			qiedhuan(index, item) {
				var self = this
				this.num = index; //this指向app
			},
			goBuyontop(){
				uni.navigateTo({
					url:'./buyOntop'
				})
			},
			goBond(){
				uni.navigateTo({
					url:'./bond'
				})
				},
				gotaskdetail(){
					uni.navigateTo({
						url:'./taskDetails'
					})
				},
				godosage(){
					uni.navigateTo({
						url:'./dosage'
					})
				},
				gotaskmanage(){
					uni.navigateTo({
						url:'./taskManagement'
					})
				}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F1F1F1;
	}
	.more {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #333333;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #7322D8;
		font-weight: bold;
		position: absolute;
		right: 65rpx;
	}

	.jia {
		position: relative;
		top: -4rpx;
	}

	.header {
		width: 750rpx;
		height: 200rpx;
		background-color: white;
		margin-top: 10rpx;
		position: relative;
	}

	.headPortrait {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 20rpx;
		left: 30rpx;
	}

	.name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 30rpx;
		left: 151rpx;
	}

	.id {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		right: 32rpx;
		top: 30rpx;
	}

	.shiminga {
		width: 105rpx;
		height: 30rpx;
		position: absolute;
		top: 78rpx;
		left: 150rpx;
	}

	.vipa {
		width: 120rpx;
		height: 30rpx;
		position: absolute;
		top: 78rpx;
		left: 265rpx;
	}

	.vip {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		top: 82rpx;
		right: 30rpx;
	}

	.toppingNum {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		bottom: 22rpx;
		left: 31rpx;
	}

	.purchase {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		bottom: 22rpx;
		left: 209rpx;
	}

	.bond {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		bottom: 22rpx;
		right: 52rpx;
	}

	.Back_icon {
		width: 12rpx;
		height: 20rpx;
		position: absolute;
		bottom: 28rpx;
		right: 30rpx;
	}

	.issueVoucher {
		width: 750rpx;
		height: 123rpx;
		background: rgba(255, 255, 255, 1);
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.issue {
		font-size: 24rpx;
		color: #333333;
		position: absolute;
		left: 31rpx;
	}

	.voucher {
		font-size: 28rpx;
		color: #CE20EC;
		position: relative;
		left: 10rpx;
	}

	.recharge {
		width: 82rpx;
		height: 36rpx;
		border: 2rpx solid rgba(115, 34, 216, 1);
		border-radius: 17rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		right: 128rpx;

	}

	.withdrawal {
		width: 82rpx;
		height: 36rpx;
		border: 2rpx solid rgba(115, 34, 216, 1);
		border-radius: 17rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		right: 30rpx;
	}

	.releaseBox {
		width: 750rpx;
		height: 84rpx;
		background: rgba(255, 255, 255, 1);
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.tabBoxstyle {
		width: 85rpx;
		height: 84rpx;
		border-bottom: 5rpx solid #7322D8;
	}

	.tabBox {
		width: 85rpx;
		height: 84rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tabcontent {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.taskStatusBox {
		width: 750rpx;
		background: rgba(255, 255, 255, 1);
		margin-top: 10rpx;
		position: relative;
	}
	.moreImgbox{
		width: 750rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
	}
	.moreIcon{
		width: 34rpx;
		height: 8rpx;
		position: absolute;
		right: 30rpx;
	}
   .taskStatusBox_top{
	   width: 750rpx;
	   height: 108rpx;
	   // border: 1rpx solid red;
	   position: relative;
   }
   .taskStatusBox_center{
	   width: 750rpx;
	   height: 64rpx;
	   // border: 1rpx solid red;
	   position: relative;
   }
	.taskName {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 25rpx;
		left: 31rpx;
	}
     .pzBox{
		 width: 200rpx;
		 height: 40rpx;
		 position: absolute;
		 right: 30rpx;
		 top: 25rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	 }
	.pingzheng {
		width: 22rpx;
		height: 24rpx;
	}

	.vouchera {
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-left: 10rpx;
	}
    .priceleft{
			font-size: 26rpx;
			color: #FF3B30;
			position: absolute;
			top: 50rpx;
			right: 30rpx;
	}
	.labela {
		width: 115rpx;
		height: 28rpx;
		background: rgba(115, 34, 216, 1);
		opacity: 0.5;
		border-radius: 4rpx;
		font-size: 16rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 79rpx;
		left: 30rpx;
	}

	.labelb {
		width: 115rpx;
		height: 28rpx;
		background: rgba(115, 34, 216, 1);
		opacity: 0.5;
		border-radius: 4rpx;
		font-size: 16rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 79rpx;
		left: 158rpx;
	}

	.price {
		font-size: 26rpx;
		color: #FF3B30;
		position: absolute;
		top: 15rpx;
		left: 28rpx;
	}
     .republish{
		 font-size:26rpx;
		 font-family:PingFang SC;
		 font-weight:400;
		 color:rgba(115,34,216,1);
		 position: absolute;
		 right: 30rpx;
	 }
     .tobeRevieweda{
		 font-size:26rpx;
		 font-family:PingFang SC;
		 font-weight:400;
		 color:rgba(115,34,216,1);
		 position: absolute;
		 right: 30rpx;
	 }
	.number {
		font-size: 26rpx;
		color: #333333;
	}

	.addff {
		width: 130rpx;
		height: 50rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 25rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0rpx;
		right: 30rpx;
		z-index: 999;
	}

	.numBox {
		width: 690rpx;
		height: 83rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		left: 30rpx;
	}

	.shulaing {
		width: 24rpx;
		height: 22rpx;
	}

	.num {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		margin-left: 10rpx;
		position: relative;
		top: -5rpx;
	}

	.text {
		width: 22rpx;
		height: 22rpx;
	}

	.surplus {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		margin-left: 10rpx;
		position: relative;
		top: -5rpx;
	}

	.numberimg {
		width: 27rpx;
		height: 20rpx;
	}

	.numbera {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		margin-left: 10rpx;
		position: relative;
		top: -5rpx;
	}

	.bianhao {
		width: 23rpx;
		height: 23rpx;
	}

	.time {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		margin-left: 10rpx;
		position: relative;
		top: -5rpx;
	}

	.timeNum {
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #7322D8;
	}
	.unexpired{
		width: 690rpx;
		height: 83rpx;
		// border: 1rpx solid red;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		left: 30rpx;
		}
		.tobeReviewed{
			width:120rpx;
			height:50rpx;
			background:rgba(115,34,216,1);
			border-radius:25rpx;
			font-size:24rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(255,255,255,1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.modify{
			width:110rpx;
			height:50rpx;
			background:rgba(115,34,216,1);
			border-radius:25rpx;
			font-size:24rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(255,255,255,1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.end{
			width:110rpx;
			height:50rpx;
			background:rgba(115,34,216,1);
			border-radius:25rpx;
			font-size:24rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(255,255,255,1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.top{
			width:110rpx;
			height:50rpx;
			background:rgba(115,34,216,1);
			border-radius:25rpx;
			font-size:24rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(255,255,255,1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.dosage{
			width:160rpx;
			height:50rpx;
			background:rgba(115,34,216,1);
			border-radius:25rpx;
			font-size:24rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(255,255,255,1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
</style>
